<template>

  <div class="page-demand-detail">
    <div class="table w50">
      <div class="table-row-group" >
        <ul class="table-row">
          <li class="table-cell-title br0">状态</li>
          <li class="table-cell-content br0">{{formData.statusDesc}}</li>
          <li class="table-cell-title br0">求购人</li>
          <li class="table-cell-content">{{formData.contactName}}</li>
        </ul>
      </div>
      <div class="table-row-group" >
        <ul class="table-row">
          <li class="table-cell-title br0">手机号码</li>
          <li class="table-cell-content br0">{{formData.contactMobileNo}}</li>
          <li class="table-cell-title br0">公司</li>
          <li class="table-cell-content">{{formData.companyName}}</li>
        </ul>
      </div>
      <div class="table-row-group" >
        <ul class="table-row">
          <li class="table-cell-title br0">产品名称</li>
          <li class="table-cell-content br0">{{formData.goodsName}}</li>
          <li class="table-cell-title br0">产地</li>
          <li class="table-cell-content">{{formData.countryOrigin}}</li>
        </ul>
      </div>
      <div class="table-row-group" >
        <ul class="table-row">
          <li class="table-cell-title br0">意向价格（RMB/KG）</li>
          <li class="table-cell-content br0">{{formData.intentPriceString}}</li>
          <li class="table-cell-title br0">厂号</li>
          <li class="table-cell-content">{{formData.vendorNo}}</li>
        </ul>
      </div>
      <div class="table-row-group" >
        <ul class="table-row">
          <li class="table-cell-title br0">求购地</li>
          <li class="table-cell-content br0">{{formData.city}}</li>
          <li class="table-cell-title br0">求购量(吨)</li>
          <li class="table-cell-content">{{formData.weight}}</li>
        </ul>
      </div>
      <div class="table-row-group" >
        <ul class="table-row">
          <li class="table-cell-title br0">查看人数</li>
          <li class="table-cell-content br0">{{formData.seeCount}}</li>
          <li class="table-cell-title br0">报价人数</li>
          <li class="table-cell-content">{{formData.quoteCount}}</li>
        </ul>
      </div>
    </div>
    <div class="table mb-1">
      <div class="table-row-group" >
        <ul class="table-row">
          <li class="table-cell-title-lastrow">要求</li>
          <li class="table-cell-content-lastrow br0">{{formData.remarkDemand}}</li>
        </ul>
      </div>
    </div>
    <div v-if="formData.status != null && formData.status == 3">
      <div v-if="fileData != null && fileData.length > 0">
        <div class="file-source">
          <div class="file-title">交易凭证</div>
          <div class="file-content">
            <ul class="crendital">
              <li v-for="(DemandFile,index) in fileData">
                <div class="file-box">
                  <img v-if="DemandFile.fileType ==1"  :preview="DemandFile.id" :src="DemandFile.urlM"  :large="DemandFile.url" alt="">
                  <span v-else class="other-file" @click="downloadFile(DemandFile.name, DemandFile.url)">
                    <i class="icon maliiconfont maliicon-wenjian1"></i>
                  </span>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <br><br>
        <div class="table mb-1">
          <div class="table-row-group" >
            <ul class="table-row">
              <li class="table-cell-remark">备注：{{formData.remarkClose}}</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div v-if="quoterData != null && quoterData.length > 0">
      <div class="table-title">报价人</div>
      <el-table class="table-content" :data="quoterData" border tooltip-effect="dark" max-height="235" style="width: 100%">
        <el-table-column align="center" prop="contactName" label="报价人" width="120"></el-table-column>
        <el-table-column align="center" prop="contactMobileNo" label="手机号" width="120"></el-table-column>
        <el-table-column align="center" prop="companyName" label="公司名称" width="180"></el-table-column>
        <el-table-column align="center" prop="price" label="报价（RMB/KG）" width="140"></el-table-column>
        <el-table-column align="left" prop="remark" label="描述"></el-table-column>
      </el-table>
    </div>
    <div v-if="payData != null && payData.length > 0">
      <div class="table-title">查看记录</div>
      <el-table class="table-content" :data="payData" border tooltip-effect="dark" max-height="235" style="width: 100%">
        <el-table-column align="center" prop="contactName" label="浏览人" width="300"></el-table-column>
        <el-table-column align="center" prop="userNo" label="用户编号" width="300"></el-table-column>
        <el-table-column align="center" prop="successTime" label="付费时间"></el-table-column>
      </el-table>
    </div>
    <br><br>
  </div>

</template>
<script type="text/ecmascript-6">
  import PcDialog from 'components/dialog';
  export default{
    props: {
      id: [String, Number]
    },
    components: {
      PcDialog
    },
    data() {
      return {
        formData: [],
        fileData: [],
        quoterData: [],
        payData: [],
        demandId: this.id
      };
    },
    created() {
      this.initData();
    },
    computed: {
    },
    methods: {
      // 根据求购ID获取求购的详细数据
      initData() {
        this.ajax({
          url: '/ibs/web/demand/detail/' + this.demandId,
          type: 'GET',
          success: (res) => {
            setTimeout(() => {
              this.$pcNProgress.done();
              this.$previewRefresh();
            }, 300);
            this.formData = res.result;
            this.fileData = res.result.demandFileVos;
            this.quoterData = res.result.demandDetailQuoteVos;
            this.payData = res.result.demandInfoPayVos;
          }
        });
      },
      downloadFile (name, url) {
        let link = document.createElement('a');
        link.style.display = 'none';
        window.open(url);
        link.setAttribute('download', name);
        document.body.appendChild(link);
        link.click();
      }
    }
  };
</script>
<style>
  .page-demand-detail {
    width: 958px;
  }
  .page-demand-detail .table{
    display:table;
    border-collapse:collapse;
    border:1px solid #e5e5e5;
    width:100%;
    background:#ffffff;
  }
  .page-demand-detail .table .table-row-group{
    display:table-row-group;
    width: 100%;
    border-top: 1px solid #e5e5e5;
    border-left:1px solid #e5e5e5;
  }
  .page-demand-detail .table .table-row-group .table-row{
    display:table-row;
    height: 40px;
  }
  .page-demand-detail .table .table-row-group .table-row .table-cell-title{
    display:table-cell;
    padding:0 5px;
    border-left:1px solid #e5e5e5;
    border-right:1px solid #e5e5e5;
    height: 40px;
    width: 160px;
    line-height: 40px;
    text-align:center;
    color: #4d4d4d;
  }
  .page-demand-detail .table .table-row-group .table-row .table-cell-content{
    display:table-cell;
    padding:0 5px;
    border-left:1px solid #e5e5e5;
    border-right:1px solid #e5e5e5;
    height: 40px;
    width: 320px;
    line-height: 40px;
    text-indent: 20px;
    color: #1a1a1a;
  }
  .page-demand-detail .table .table-row-group .table-row .table-cell-title-lastrow{
    display:table-cell;
    padding:0 5px;
    border-left:1px solid #e5e5e5;
    border-right:1px solid #e5e5e5;
    height: 40px;
    width: 160px;
    line-height: 40px;
    text-align:center;
    color: #4d4d4d;
  }
  .page-demand-detail .table .table-row-group .table-row .table-cell-content-lastrow{
    display:table-cell;
    padding:0 5px;
    border-left:1px solid #e5e5e5;
    border-right:1px solid #e5e5e5;
    height: 40px;
    width: 800px;
    line-height: 40px;
    text-indent: 20px;
    color: #1a1a1a;
  }
  .page-demand-detail .el-table--border td{
    border-right:1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
  }
  .page-demand-detail .table .w50 ul{
    box-sizing: border-box;
  }
  .page-demand-detail .el-table--border td div{
    color:#000;
  }
  .br0{
    border-right:none;
  }
  .page-demand-detail .mb-1{
    margin-top:-1px;
    margin-bottom:-1px;
  }
  .page-demand-detail .table-title{
    font-size:16px;
    color:#333333;
    border:1px solid #ebeef5;
    background:#fff;
    height: 50px;
    line-height:50px;
    padding-left:20px;
    margin-top:26px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin-bottom:-1px;
  }
  .page-demand-detail .table-content{
    font-size:16px;
    color:#333333;
    border:1px solid #ebeef5;
    background:#fff;
    border-spacing: 0;
    border-collapse:separate;
  }

  .file-title{
    font-size:16px;
    color:#333333;
    border:1px solid #ebeef5;
    border-width:1px 1px 0px 1px;
    background:#fff;
    height: 50px;
    line-height:50px;
    padding-left:20px;
    margin-top:26px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin-bottom:-1px;
  }
  .file-content{
    font-size:16px;
    color:#333333;
    border:1px solid #ebeef5;
    border-width:0px 1px 1px 1px;
    background:#fff;
    min-height: 50px;
    line-height:50px;
    padding-left:20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin-bottom:-1px;
  }
  .file-source ul.crendital{
    vertical-align: top;
  }
  .file-source ul li{
    display: inline-block;
    width:160px;
    height:190px;
    border:1px solid #e6e6e6;
    text-align: center;
    margin-left:11px;
    margin-right:11px;
    cursor: pointer;
    margin-bottom:15px;
    vertical-align: top;
  }
  .file-box{
    width:130px;
    height:160px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin:0 auto;
    margin-top:10px;
    position: relative;
  }
  .file-box img{
    width:100%;
    height:168px;
    object-fit: cover;
  }

  .other-file{
    width:130px;
    height:168px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    text-align: center;
    display: inline-block;
  }
  .other-file .maliiconfont{
    font-size: 60px;
    position: absolute;
    z-index: 9;
    color: #999999;
    left:0;
    right:0;
    margin: 0 auto;
    margin-top:60px;
  }
  .table-cell-remark{
    display:table-cell;
    padding:0 5px;
    border-left:1px solid #e5e5e5;
    border-right:1px solid #e5e5e5;
    height: 40px;
    width: 160px;
    line-height: 40px;
    text-align:left;
    text-indent:20px;
    color: #4d4d4d;
  }

</style>
